<template>
    <div class="base-info">
        <el-descriptions title="用户信息" :column="5" border class="user-info">
            <el-descriptions-item :rowspan="2" width="100" label="头像" align="center" class-name="avatar-container"
                label-class-name="none">
                <userAvatar size="69" class="forbid-select avatar" />
                <div class="edit-avatar" @click="dialogVisibleCorpper = true">编辑头像</div>
            </el-descriptions-item>
            <el-descriptions-item label="用户ID" width="150">{{ getUserInfo.sequence }}</el-descriptions-item>
            <el-descriptions-item label="昵称" width="250">
                <span>{{ getUserInfo.nickname }}</span>
                <span class="operation-content cursor-pointer">
                    <el-icon class="operation-icon" @click="modifyUserName">
                        <EditPen />
                    </el-icon>
                </span>
            </el-descriptions-item>
            <el-descriptions-item label="手机号" width="300">
                {{ getUserInfo.mobile ? getUserInfo.mobile : '未绑定' }}
            </el-descriptions-item>
            <el-descriptions-item label="邮箱">{{ getUserInfo.mail ? getUserInfo.mail : '未绑定' }}</el-descriptions-item>
            <el-descriptions-item label="积分">{{ getUserInfo.point }}</el-descriptions-item>
            <el-descriptions-item label="Token">
                <span>{{ getUserInfo.apiToken }}</span>
                <span class="operation-content cursor-pointer">
                    <el-icon class="operation-icon" @click="copyToken">
                        <CopyDocument />
                    </el-icon>
                </span>
            </el-descriptions-item>
            <el-descriptions-item label="微信">{{ getUserInfo.bindWx ? '已绑定' : '未绑定' }}</el-descriptions-item>
            <el-descriptions-item label="注册时间" min-width="200">{{ getUserInfo.registerTime }}</el-descriptions-item>
        </el-descriptions>
        <div class="login-title">最近登录情况</div>
        <el-table :data="loginRecord" border header-cell-class-name="el-table-header-cell"
            cell-class-name="el-table-cell" class="e-page table-with-pagination" v-loading="loading">
            <el-table-column prop="logintype" label="登陆方式" width="300">
                <template #default="scope">
                    <el-tag :type="tagType[scope.row.loginfrom]?.type || 'danger'"
                        :color="tagType[scope.row.loginfrom]?.color" class="forbid-select button-auto-resize"
                        disable-transitions>
                        {{ scope.row.logintype }}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="clientType" label="客户端" />
            <el-table-column prop="logintime" label="登录时间" width="300" />
            <el-table-column prop="logintime" label="登录状态" width="150">
                <template #default="scope">
                    <el-tag :type="scope.row.status === 0 ? 'danger' : 'success'"
                        class="forbid-select button-auto-resize" disable-transitions>
                        {{ scope.row.status === 0 ? '失败' : '成功' }}
                    </el-tag>
                </template>
            </el-table-column>
        </el-table>
        <ImageCropper v-model="dialogVisibleCorpper" :image="getUserAvatarImage(getUserInfo.avatar)"
            @complete="complete" title="修改头像" />
    </div>
</template>

<script setup>
import { useRequest, useCopyText, useElMessageBox, useElMessage } from "@/hooks"
import { CopyDocument, EditPen } from '@element-plus/icons-vue'
import { storeToRefs, useUserStore } from "@/pinia"
import { ElInput } from "element-plus"
import ImageCropper from "@/components/imageCropper/imageCropper.vue"
import { getUserAvatarImage, base64ToFile } from "@/utils/tools"
import request from "@/utils/request"

let loading = $ref(false)
let loginRecord = $ref([])
const dialogVisibleCorpper = ref(false)

const userStore = useUserStore()
const { getUserInfo } = storeToRefs(userStore)

const tagType = { 1: { type: 'primary', color: "#ecf5ff" }, 2: { type: 'success', color: "#f0f9eb" }, 3: { type: 'info', color: "#f4f4f5" }, 4: { type: 'warning', color: "#fdf6ec" }, 5: { type: 'danger', color: "#c6ffff" } }

const copyToken = () => {
    useCopyText(getUserInfo.value.apiToken)
}

// 组件提交事件
const complete = (f) => {
    const formData = new FormData();
    formData.append("file", base64ToFile(f, "avatar"))
    request({ url: "/user/avatar", method: "post", data: formData }).then(resp => {
        if (resp && resp.status) {
            useElMessage.success("头像修改成功")
            userStore.updateUserInfo({ avatar: resp.message })
        }
    }).catch(error => {
        console.log(error)
    })
}

const modifyUserName = () => {
    let nickname = $ref("")
    useElMessageBox("修改用户名", () => h(ElInput, {
        placeholder: "请输入新的昵称", maxlength: 5, modelValue: nickname, 'onUpdate:modelValue': (val) => {
            nickname = val
        }, style: "width:100%", class: "nickname-input"
    }), {
        showIcon: false, showCancelButton: true, onOpened: (ele) => {
            ele.querySelector(".nickname-input input").focus()
        }
    }).then(() => {
        if (nickname) {
            useRequest.post({ url: "https://api.dansj.cn/changeUsername", nickname }).then((resp) => {
                if (resp && resp.status) {
                    getUserInfo.value.nickname = nickname
                    useElMessage.success("修改成功")
                } else {
                    useElMessage.error(resp.message)
                }
            })
        }
    })
}

const getLoginRecord = () => {
    loading = true
    useRequest("https://api.dansj.cn/loginRecord").then((resp) => {
        if (resp && resp.status) {
            loginRecord = resp.data
        }
    }).finally(() => loading = false)
}

getLoginRecord()
</script>

<style>
.base-info {
    height: 100%;
}

.base-info .user_info div {
    height: 30px;
    line-height: 30px;
    font-size: 18px;
    padding: 5px 0;
}

.base-info .user_info div span:first-child {
    width: 10%;
    min-width: 120px;
    display: inline-block;
    text-align: right;
    padding-right: 20px;
}

.operation-icon {
    color: blueviolet;
    cursor: pointer;
}

.operation-content {
    left: 20px;
    position: relative;
    top: 3px;
}

.base-info .user_info {
    max-width: 350px;
}

.login-record {
    max-width: calc(100% - 350px);
}

.user-info .el-descriptions__header .el-descriptions__title {
    font-size: 18px;
}

.user-info .el-descriptions__body .el-descriptions__table .el-descriptions__cell {
    font-size: 16px;
}

.user-info .el-descriptions__content.el-descriptions__cell.is-bordered-content {
    position: relative;
}

.login-title {
    font-size: 18px;
    margin: 16px 0;
    font-weight: bold;
    color: var(--el-text-color-primary);
}

.user-info .el-descriptions__label.el-descriptions__cell.is-bordered-label {
    background: rgb(255 255 255 / 10%);
    text-align: center;
    width: 150px !important;
}

.user-info .el-descriptions__body {
    background: transparent
}

/*多一个分页高度50px*/
.base-info .table-with-pagination.el-table {
    height: calc(100% - 180px);
    /* background: rgba(255, 255, 255, .7); */
    background: transparent;
}

.user-info .avatar-container {
    position: relative;
    margin: auto;
}

.user-info .avatar {
    vertical-align: middle;
}

.user-info .el-descriptions__content:has(.avatar) {
    padding: 5px !important;
}

.user-info .edit-avatar {
    height: 69px;
    font-size: 14px;
    top: calc((100% - 69px)/2);
    left: calc((100% - 69px)/2);
    color: #fff;
    border-radius: 50%;
    overflow: hidden;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgb(0 0 0 / 20%);
    backdrop-filter: blur(1px);
    aspect-ratio: 1;
    opacity: 0;
    transition: all 0.5s ease;
}

.user-info .edit-avatar:hover {
    opacity: 1;
}

.user-info .none {
    display: none;
}
</style>